<template>
  <div class="app-container">

    <div class="tabInfo">
    <el-card class="box-card">
      <div class="clearfix" slot="header">
        <span class="el-icon-document">已办任务</span>
        <el-button
          style="float: right"
          size="mini"
          type="danger"
          @click="goBack"
        >
          关闭
        </el-button>
      </div>
      <el-tabs tab-position="top" v-model="activeName" @tab-click="handleClick">
        <!-- 表单信息 -->
        <!-- <el-tab-pane label="表单信息" name="1">
          <el-col :span="16" :offset="4">
            <v-form-render ref="vFormRef" />
          </el-col>
        </el-tab-pane> -->
        <!-- 流程流转记录 -->
        <el-tab-pane label="流转记录" name="2">
          <el-col :span="16" :offset="4">
            <div class="block">
              <el-timeline>
                <el-timeline-item
                  v-for="(item, index) in flowRecordList"
                  :key="index"
                  :icon="setIcon(item.finishTime)"
                  :color="setColor(item.finishTime)"
                >
                  <p style="font-weight: 700">{{ item.taskName }}</p>
                  <el-card :body-style="{ padding: '10px' }">
                    <el-descriptions
                      class="margin-top"
                      :column="1"
                      size="small"
                                          >
                      <el-descriptions-item
                        v-if="item.assigneeName"
                        label-class-name="my-label"
                      >
                        <template #label>
                          <i class="el-icon-user"></i>办理人
                        </template>
                        {{ item.assigneeName }}
                        <el-tag type="info" size="mini">
                          {{ item.deptName }}
                        </el-tag>
                      </el-descriptions-item>
                      <el-descriptions-item
                        v-if="item.candidate"
                        label-class-name="my-label"
                      >
                        <template #label>
                          <i class="el-icon-user"></i>候选办理
                        </template>
                        {{ item.candidate }}
                      </el-descriptions-item>
                      <el-descriptions-item label-class-name="my-label">
                        <template #label>
                          <i class="el-icon-date"></i>接收时间
                        </template>
                        {{ item.createTime }}
                      </el-descriptions-item>
                      <el-descriptions-item
                        v-if="item.finishTime"
                        label-class-name="my-label"
                      >
                        <template #label>
                          <i class="el-icon-date"></i>处理时间
                        </template>
                        {{ item.finishTime }}
                      </el-descriptions-item>
                      <el-descriptions-item
                        v-if="item.duration"
                        label-class-name="my-label"
                      >
                        <template #label>
                          <i class="el-icon-time"></i>耗时
                        </template>
                        {{ item.duration }}
                      </el-descriptions-item>
                      <el-descriptions-item
                        v-if="item.comment"
                        label-class-name="my-label"
                      >
                        <template #label>
                          <i class="el-icon-tickets"></i>处理意见
                        </template>
                        {{ item.comment.comment }}
                      </el-descriptions-item>
                    </el-descriptions>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-col>
        </el-tab-pane>
        <!-- 流程图 -->
        <el-tab-pane label="流程图" name="3">
          <BpmnViewer :flowData="flowData" :procInsId="taskForm.procInsId" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";

import { getProcessVariables, flowXmlAndNode } from "@/api/flowable/definition";

import { flowRecord } from "@/api/flowable/finished";
import BpmnViewer from "@/components/Process/viewer";

const route = useRoute();
export default {
  name: "Record",
  components: {
    BpmnViewer,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const vFormRef = ref(null);
    const activeName = ref("2");
    const flowData = ref({});
    const flowRecordList = ref([]);
    const taskForm = reactive({
      multiple: false,
      comment: "",
      procInsId: "",
      instanceId: "",
      deployId: "",
      taskId: "",
      procDefId: "",
      vars: "",
    });

    // 初始化任务表单数据
    taskForm.deployId = route.query?.deployId;
    taskForm.taskId = route.query?.taskId;
    taskForm.procInsId = route.query?.procInsId;

    // 获取流程流转记录
    const getFlowRecordList = (procInsId, deployId) => {
      const params = { procInsId, deployId };
      flowRecord(params)
        .then((res) => {
          flowRecordList.value = res.data.flowList;
        })
        .catch(() => {
          goBack();
        });
    };

    // 获取流程变量内容
    const processVariables = (taskId) => {
      if (taskId) {
        getProcessVariables(taskId).then((res) => {
          vFormRef.value?.setFormJson(res.data.formJson);
          vFormRef.value?.setFormData(res.data);
          vFormRef.value?.disableForm();
        });
      }
    };

    // 根据是否完成设置图标
    const setIcon = (val) => {
      return val ? "el-icon-check" : "el-icon-time";
    };

    // 根据是否完成设置颜色
    const setColor = (val) => {
      return val ? "#2bc418" : "#b3bdbb";
    };

    // 返回页面
    const goBack = () => {
      router.push({ path: "/task/finished", query: { t: Date.now() } });
    };

    // 处理标签页点击事件
    const handleClick = (tab) => {
      console.log(tab);
      if (tab.paneName === "3") {
        flowXmlAndNode({
          procInsId: taskForm.procInsId,
          deployId: taskForm.deployId
        }).then((res) => {
          flowData.value = res.data;
        });
      }
    };

    onMounted(() => {
      if (taskForm.taskId) {
        processVariables(taskForm.taskId);
      }
      getFlowRecordList(taskForm.procInsId, taskForm.deployId);
    });

    return {
      vFormRef,
      activeName,
      flowData,
      flowRecordList,
      taskForm,
      setIcon,
      setColor,
      handleClick,
      goBack,
    };
  },
};
</script>

<style lang="scss" scoped>
.test-form {
  margin: 15px auto;
  width: 800px;
  padding: 15px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.my-label {
  background: #e1f3d8;
}
</style>
